let leftArrow = document.querySelector('.icon-arrow-left-bold')
let rightArrow = document.querySelector('.icon-arrow-right-bold')

let imgNums = document.querySelectorAll('.slide-show li').length

let slideShow = document.querySelector('.slide-show')
let width = 800 //图片的宽度

let picN = 0  //当前显示图片下标
let cirN = 0  //当前显示小圆点下标
let rate = 15 // 切换的速度  px
let timer = null


leftArrow.onclick = function() {
  move(0)
}

rightArrow.onclick = function() {
  //每点一下图片往左移动一张
  move(1)
}



function move(){
  if(1){
    picN++
  }else{
    picN--
    if(picN < 0){
      picN =imgNums - 1
    }
  }
  if(picN > imgNums - 1){
    picN = 0
  }
  Roll(-picN * width)
}

//自动轮播
timer = setInterval(move, 2000)

//移动效果
function Roll(distance) {
  slideShow.style.left = distance + 'px'
}



//把页面的所有的图片url存在一个数组中
//当点击右边按钮时，往数组中push一份相同的数据
//当点击左边按钮时，往数组头部一条条插入相同的数据